<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Round Meters with Readout</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Round Meters with Readout</p>
<hr class="separator">
<div class="content">
<img src="images/roundmeterreadout0.png" width='300' height='300'>&nbsp;&nbsp;<img src="images/roundmeterreadout1.png" width='300' height='300'>
<br><br>
This example demonstrates round meters configured with a large pointer cap to display the meter value.<br><br>
The pointer cap is the circular object at the center of the meter. In this example, using <a href="AngularMeter.setCap2.htm">AngularMeter.setCap2</a>, the pointer cap is set to an exceptionally large size so that it can act as a place to display text. The text is added using <a href="BaseChart.addText.htm">BaseChart.addText</a>, centered at the meter center.<br><br>
In one of the meters, the pointer is configured to be floating, which means the base of the pointer is not fixed at the meter center. The pointer looks like a triangle somewhere between the center and the perimeter, pointing to the meter value. This pointer is added using <a href="AngularMeter.addPointer2.htm">AngularMeter.addPointer2</a> with <a href="Chart.TriangularPointer2.htm">TriangularPointer2</a> just like a standard pointer, but with additional arguments to specify the radial position of the pointer base and tip, as well as the pointer width.
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/roundmeterreadout.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%!
// Function to create the demo charts
void createChart(WebChartViewer viewer, int chartIndex)
{
    // The value to display on the meter
    double value = 54;

    // The main color of the four meters in this example. The other colors and gradients are derived
    // from the main color.
    int[] colorList = {0x0033dd, 0xaaaa00};
    int mainColor = colorList[chartIndex];

    //
    // In this example, we demonstrate how to parameterized by size, so that the chart size can be
    // changed by changing just one variable.
    //
    int size = 300;

    // The radius of the entire meter, which is size / 2, minus 2 pixels for margin
    int outerRadius = size / 2 - 2;

    // The radius of the meter scale
    int scaleRadius = outerRadius * 92 / 100;

    // The radius of the color scale
    int colorScaleRadius = scaleRadius * 43 / 100;

    // The width of the color scale
    int colorScaleWidth = scaleRadius * 10 / 100;

    // Major tick length
    int tickLength = scaleRadius * 10 / 100;

    // Major tick width
    int tickWidth = scaleRadius * 1 / 100 + 1;

    // Label font size
    int fontSize = scaleRadius * 13 / 100;

    // Radius of readout circle as a ratio to the scale radius
    double readOutRadiusRatio = 0.333333333333;

    // Readout font size
    int readOutFontSize = scaleRadius * 24 / 100;

    //
    // Create an angular meter based on the above parameters
    //

    // Create an AngularMeter object of the specified size. In this demo, we use black (0x000000) as
    // the background color. You can also use transparent or other colors.
    AngularMeter m = new AngularMeter(size, size, 0x000000);

    // Set the default text and line colors to white (0xffffff)
    m.setColor(Chart.TextColor, 0xffffff);
    m.setColor(Chart.LineColor, 0xffffff);

    // Set meter center and scale radius, and set the scale angle from -180 to +90 degrees
    m.setMeter(size / 2, size / 2, scaleRadius, -180, 90);

    // Background gradient with the mainColor at the center and become darker near the border
    double[] bgGradient = {0, mainColor, 0.5, m.adjustBrightness(mainColor, 0.75), 1,
        m.adjustBrightness(mainColor, 0.15)};

    // Fill the meter background with the background gradient
    m.addRing(0, outerRadius, m.relativeRadialGradient(bgGradient, outerRadius * 0.66));

    // Gradient for the neon backlight, with the main color at the scale radius fading to
    // transparent
    double[] neonGradient = {0.89, Chart.Transparent, 1, mainColor, 1.07, Chart.Transparent};
    m.addRing(scaleRadius * 85 / 100, outerRadius, m.relativeRadialGradient(neonGradient));

    // The neon ring at the scale radius with width equal to 1/80 of the scale radius, creating
    // using a brighter version of the main color
    m.addRing(scaleRadius, scaleRadius + scaleRadius / 80, m.adjustBrightness(mainColor, 2));

    // Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
    m.setScale(0, 100, 10, 5, 1);

    // Set the scale label style, tick length and tick width. The minor and micro tick lengths are
    // 80% and 60% of the major tick length, and their widths are around half of the major tick
    // width.
    m.setLabelStyle("Arial Italic", fontSize);
    m.setTickLength(-tickLength, -(tickLength * 80 / 100), -(tickLength * 60 / 100));
    m.setLineWidth(0, tickWidth, (tickWidth + 1) / 2, (tickWidth + 1) / 2);

    // Demostrate different types of color scales and putting them at different positions.
    double[] smoothColorScale = {0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
        0xff0000};
    double[] highColorScale = {70, Chart.Transparent, 100, 0xff0000};

    if (chartIndex == 0) {
        // Add the smooth color scale
        m.addColorScale(smoothColorScale, colorScaleRadius, colorScaleWidth);
        // Add a red (0xff0000) pointer
        m.addPointer2(value, 0xff0000);
    } else {
        // Add the high color scale at the default position
        m.addColorScale(highColorScale);
        // Add a red (0xff0000) triangular pointer starting from 40% and ending at 60% of scale
        // radius, with a width 6 times the default
        m.addPointer2(value, 0xff0000, -1, Chart.TriangularPointer2, 0.4, 0.6, 6);
    }

    // Configure a large "pointer cap" to be used as the readout circle at the center. The cap
    // border width is set to 1.5% of the scale radius. The cap color is darker version of the main
    // color. The border color is a brighter version of the main color with 75% brightness gradient
    // effect.
    m.setCap2(Chart.Transparent, m.adjustBrightness(mainColor, 0.3), m.adjustBrightness(mainColor,
        1.5), 0.75, 0, readOutRadiusRatio, 0.015);

    // Add value label at the center using a brighter version of the main color and Arial Italic
    // font
    m.addText(size / 2, size / 2, m.formatValue(value, "{value|0}"), "Arial Italic",
        readOutFontSize, m.adjustBrightness(mainColor, 2.5), Chart.Center).setMargin(0);

    // Add glare up to the scale radius
    m.addGlare(scaleRadius);

    // Output the chart
    viewer.setChart(m, Chart.SVG);
}
%&gt;
&lt;%
// This example includes 2 charts
WebChartViewer[] viewers = new WebChartViewer[2];
for (int i = 0; i &lt; viewers.length; ++i) {
    viewers[i] = new WebChartViewer(request, "chart" + i);
    createChart(viewers[i], i);
}
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Round Meters with Readout&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Round Meters with Readout
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here are the chart images ****** --&gt;
    &lt;%
        for (int i = 0; i &lt; viewers.length; ++i) {
            out.write(viewers[i].renderHTML(response));
            out.write(" ");
        }
    %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
